<template>
  <div class="home">
    <!-- 轮播图 -->
    <section class="hero-section">
      <el-carousel
        :height="'min(1080px, 60vw) !important'"
        :interval="5000"
        arrow="never"
        auto-play
        indicator-position="none"
        @change="onCarouselChange"
      >
        <el-carousel-item v-for="(item, index) in carouselData" :key="index">
          <div class="carousel-item">
            <img class="carousel-bg" :src="item.image" alt="carousel" />
            <div class="carousel-content">
              <div class="container">
                <h1 class="carousel-title">{{ item.title }}</h1>
                <p class="carousel-subtitle">{{ item.subtitle }}</p>
                <div
                  class="intro-actions"
                  v-if="item.buttonText && item.buttonText.toString().trim()"
                >
                  <button
                    class="carousel-btn"
                    @click.stop.prevent="handleCarouselAction(item)"
                  >
                    {{ item.buttonText }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 展会概览 -->
    <section class="overview-section section">
      <div class="container">
        <h2 class="section-title">{{ "展会规模" }}</h2>
        <p class="section-subtitle">
          {{ overviewStats.subtitle || "展会基本情况统计" }}
        </p>
        <div class="overview-stats">
          <div
            class="stat-item"
            v-for="(stat, index) in overviewStats.stats"
            :key="stat.label"
          >
            <div class="stat-icon">
              <el-icon v-if="index === 0"><OfficeBuilding /></el-icon>
              <el-icon v-else-if="index === 1"><Trophy /></el-icon>
              <el-icon v-else-if="index === 2"><User /></el-icon>
              <el-icon v-else-if="index === 3"><Location /></el-icon>
              <el-icon v-else-if="index === 4"><Calendar /></el-icon>
              <el-icon v-else><TrendCharts /></el-icon>
            </div>
            <h4>{{ animatedStats[index]?.displayValue || "0" }}</h4>
            <p>{{ stat.label }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 展商评价 -->
    <section class="testimonials-section section">
      <div class="container">
        <h2 class="section-title">展商评价</h2>
        <div class="testimonials-content">
          <div v-if="testimonialsData.length > 0" class="testimonials-carousel">
            <div class="testimonials-list">
              <div
                class="testimonial-card"
                v-for="(testimonial, index) in testimonialsData"
                :key="index"
              >
                <div class="testimonial-footer">
                  <div class="testimonial-image">
                    <img :src="testimonial.image" :alt="testimonial.company" />
                  </div>
                  <div class="company-info">
                    <h3 class="company-name">{{ testimonial.company }}</h3>
                  </div>
                </div>
                <div class="testimonial-content">
                  <p class="testimonial-text">{{ testimonial.content }}</p>
                </div>
              </div>
            </div>
            <!-- 如果只有一组数据，直接显示，不使用轮播 -->
            <!-- <div v-if="testimonialGroups.length === 1" class="testimonials-row">
              <div
                class="testimonial-card"
                v-for="(testimonial, index) in testimonialGroups[0]"
                :key="index"
              >
                <div class="testimonial-content">
                  <p class="testimonial-text">{{ testimonial.content }}</p>
                </div>
                <div class="testimonial-footer">
                  <div class="testimonial-image">
                    <img :src="testimonial.image" :alt="testimonial.company" />
                  </div>
                  <div class="company-info">
                    <h3 class="company-name">{{ testimonial.company }}</h3>
                  </div>
                </div>
              </div>
            </div> -->
            <!-- 如果有多组数据，使用轮播 -->
            <!-- <el-carousel
              v-else
              height="350px"
              :interval="5000"
              arrow="hover"
              indicator-position="outside"
            >
              <el-carousel-item
                v-for="(group, groupIndex) in testimonialGroups"
                :key="groupIndex"
              >
                <div class="testimonials-row">
                  <div
                    class="testimonial-card"
                    v-for="(testimonial, index) in group"
                    :key="index"
                  >
                    <div class="testimonial-content">
                      <p class="testimonial-text">{{ testimonial.content }}</p>
                    </div>
                    <div class="testimonial-footer">
                      <div class="testimonial-image">
                        <img
                          :src="testimonial.image"
                          :alt="testimonial.company"
                        />
                      </div>
                      <div class="company-info">
                        <h3 class="company-name">{{ testimonial.company }}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel> -->
          </div>
          <div v-else class="testimonials-placeholder">
            <div class="placeholder-content">
              <el-icon class="placeholder-icon"><ChatDotRound /></el-icon>
              <p>展商评价即将发布，敬请期待...</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 展会宣传片 -->
    <section class="video-section section">
      <div class="container">
        <h2 class="section-title">{{ videoData.title || "展会宣传片" }}</h2>
        <p class="section-subtitle">
          {{
            videoData.subtitle || "观看FAIR plus机器人全产业链接会官方宣传片"
          }}
        </p>
        <div class="video-container">
          <div
            v-if="!isVideoPlaying && !videoError"
            class="video-placeholder"
            @click="playVideo"
          >
            <img
              :src="
                videoData.coverImage ||
                'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=450&fit=crop'
              "
              alt="展会宣传片封面"
              class="cover-image"
            />
            <div class="cover-overlay"></div>
            <div class="play-button" @click.stop="playVideo">
              <el-icon class="play-icon"><VideoPlay /></el-icon>
            </div>
            <div class="video-info">
              <span class="video-title">{{
                videoData.videoTitle || "FAIR plus机器人全产业链接会 2025"
              }}</span>
            </div>
          </div>
          <div v-else-if="videoError" class="video-error-placeholder">
            <div class="video-cover">
              <img
                :src="
                  videoData.coverImage ||
                  'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=450&fit=crop'
                "
                alt="展会宣传"
                class="cover-image"
              />
              <div class="cover-overlay"></div>
            </div>
            <div class="error-content">
              <el-icon class="error-icon"><Warning /></el-icon>
              <div class="video-info">
                <span class="video-title">{{
                  videoData.videoTitle || "FAIR plus机器人全产业链接会 2025"
                }}</span>
              </div>
              <p class="error-message">视频加载失败，请重试</p>
              <el-button type="primary" @click="retryVideo">重试播放</el-button>
            </div>
          </div>
          <div v-else class="video-player">
            <video
              ref="videoPlayer"
              controls
              class="video-element"
              @ended="onVideoEnded"
              @loadstart="onVideoLoadStart"
              @canplay="onVideoCanPlay"
              @play="onVideoPlay"
              @pause="onVideoPause"
              @error="onVideoError"
            >
              <source
                :src="
                  videoData.videoUrl ||
                  'https://www.sciif.com/upload/2025/07/01/171980475466m26n9.mp4'
                "
                type="video/mp4"
              />
              您的浏览器不支持视频播放。
            </video>
            <div v-if="isVideoLoading" class="video-loading">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <p>视频加载中...</p>
            </div>
            <div v-else class="video-overlay" @click.stop="pauseVideo">
              <div class="pause-button">
                <el-icon class="pause-icon"><VideoPause /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 展会现场照片 -->
    <section class="live-section section">
      <div class="container">
        <h2 class="section-title">{{ liveData.title || "展会现场照片" }}</h2>
        <p class="section-subtitle">
          <!-- {{ liveData.subtitle || "精彩瞬间回顾" }} -->
          <span @click="clickViewMore">点击查看更多瞬间展会精彩</span>
        </p>
        <!-- <p>点击查看更多瞬间展会精彩</p> -->
        <div
          v-if="liveData.images && liveData.images.length > 0"
          class="live-carousel"
        >
          <el-carousel
            :activeIndex="carouselActiveIndex"
            height="550px"
            :interval="4000"
            arrow="hover"
            indicator-position="outside"
            @change="viewMoreCarouselChange"
          >
            <el-carousel-item
              v-for="(image, idx) in liveData.images"
              :key="image.url || idx"
            >
              <a
                v-if="image.link"
                :href="image.link"
                target="_blank"
                rel="noopener"
                class="live-link"
              >
                <div
                  class="live-item"
                  :style="{ backgroundImage: `url(${image.url})` }"
                >
                  <div class="live-info">
                    <h3>{{ image.title || "展会现场照片" }}</h3>
                    <p>{{ image.description || "精彩瞬间回顾" }}</p>
                  </div>
                </div>
              </a>
              <div
                v-else
                class="live-item"
                :style="{ backgroundImage: `url(${image.url})` }"
              >
                <div class="live-info">
                  <h3>{{ image.title || "展会现场照片" }}</h3>
                  <p>{{ image.description || "精彩瞬间回顾" }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else class="live-placeholder">
          <div class="placeholder-content">
            <el-icon class="placeholder-icon"><Picture /></el-icon>
            <p>展会现场照片即将更新，敬请期待...</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 参展企业轮播 -->
    <section class="exhibitors-section section">
      <div class="container">
        <h2 class="section-title">
          {{ exhibitorsData.title || "参展企业陆续更新中" }}
        </h2>
        <div class="exhibitors-carousel">
          <!-- 第一排：向左轮播 -->
          <div class="exhibitor-row">
            <div class="exhibitor-scroll-left">
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in firstRowExhibitors"
                  :key="exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in firstRowExhibitors"
                  :key="'dup1-' + exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 第二排：向右轮播 -->
          <div class="exhibitor-row">
            <div class="exhibitor-scroll-right">
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in secondRowExhibitors"
                  :key="exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in secondRowExhibitors"
                  :key="'dup2-' + exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 第三排：向左轮播 -->
          <div class="exhibitor-row">
            <div class="exhibitor-scroll-left">
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in thirdRowExhibitors"
                  :key="exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
              <div class="exhibitor-group">
                <div
                  class="exhibitor-logo"
                  v-for="exhibitor in thirdRowExhibitors"
                  :key="'dup3-' + exhibitor.id"
                >
                  <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  <p class="exhibitor-name">{{ exhibitor.name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {
  ref,
  nextTick,
  reactive,
  computed,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  VideoPlay,
  Trophy,
  User,
  Setting,
  Star,
  TrendCharts,
  Connection,
  VideoPause,
  Loading,
  Warning,
  Calendar,
  Grid,
  Location,
  Phone,
  ChatDotRound,
  OfficeBuilding,
  Picture,
} from "@element-plus/icons-vue";
import { homepageApi, activityApi, exhibitorApi } from "@/api/user";
import { selectLangField } from "@/utils/lang";

export default {
  name: "Home",
  components: {
    VideoPlay,
    Trophy,
    User,
    Setting,
    Star,
    TrendCharts,
    Connection,
    VideoPause,
    Loading,
    Warning,
    Calendar,
    Grid,
    Location,
    Phone,
    ChatDotRound,
    OfficeBuilding,
    Picture,
  },
  setup() {
    const router = useRouter();
    const videoPlayer = ref(null);
    const isVideoPlaying = ref(false);
    const isVideoLoading = ref(false);
    const videoError = ref(false);

    // 轮播图数据
    const carouselData = ref([]);

    // 当前轮播图背景
    const currentCarouselImage = ref("");

    // 轮播图切换事件
    const onCarouselChange = (index) => {
      if (carouselData.value[index]) {
        currentCarouselImage.value = `url(${carouselData.value[index].image})`;
      }
    };

    // 展会亮点数据
    const highlightsData = ref([]);

    // 展区数据
    const zonesData = ref([]);

    // 重点活动宣传数据
    const eventsData = ref([]);

    // 参展企业数据
    const exhibitorGroups = ref([]);

    // 展会图片轮播数据
    const galleryImages = ref([]);

    // 展会主视觉数据
    const mainVisualData = ref({});

    // 展会概览数据
    const overviewStats = ref({});

    // 数字动画相关
    const animatedStats = ref([]);

    // 数字动画函数
    const animateNumber = (startValue, endValue, duration, callback) => {
      const startTime = Date.now();
      const animate = () => {
        const currentTime = Date.now();
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        // 使用缓动函数 - 更平缓的增长
        const easeOutCubic = 1 - Math.pow(1 - progress, 3);
        const currentValue =
          startValue + (endValue - startValue) * easeOutCubic;

        callback(Math.floor(currentValue));

        if (progress < 1) {
          requestAnimationFrame(animate);
        }
      };
      requestAnimationFrame(animate);
    };

    // 启动统计数字动画
    const startStatsAnimation = () => {
      if (!overviewStats.value.stats || overviewStats.value.stats.length === 0)
        return;

      overviewStats.value.stats.forEach((stat, index) => {
        // 解析目标数字（移除非数字字符）
        const targetValue =
          parseInt(stat.number.toString().replace(/[^\d]/g, "")) || 0;
        const startValue = Math.floor(targetValue * 0.1); // 从10%开始

        // 初始化显示值
        if (!animatedStats.value[index]) {
          animatedStats.value[index] = { displayValue: stat.number };
        }

        // 启动动画，延迟每个数字的开始时间
        setTimeout(() => {
          animateNumber(startValue, targetValue, 3500, (currentValue) => {
            // 保持原有格式（如果原数字有单位）
            const originalStr = stat.number.toString();
            const hasUnit = /[^\d]/.test(originalStr);

            if (hasUnit) {
              // 提取单位
              const unit = originalStr.replace(/[\d,]/g, "");
              animatedStats.value[index].displayValue =
                currentValue.toLocaleString() + unit;
            } else {
              animatedStats.value[index].displayValue =
                currentValue.toLocaleString();
            }
          });
        }, index * 300); // 每个数字延迟300ms开始
      });
    };

    // 视频宣传片数据
    const videoData = ref({});

    // 展会现场直播数据
    const liveData = ref({});
    // 当前轮播图索引
    const carouselActiveIndex = ref(0);

    // 图片画廊数据
    const galleryData = ref({});

    // 参展企业数据
    const exhibitorsData = ref([]);

    // 新闻数据
    const newsData = ref([]);

    // 展商评价数据
    const testimonialsData = ref([]);

    // 合作伙伴数据
    const partnersData = ref([]);

    const handleCarouselAction = (item = {}) => {
      // console.log("=== 轮播图点击事件 ===");
      // console.log("完整item数据:", JSON.stringify(item, null, 2));

      // 阻止任何默认行为
      event?.preventDefault?.();
      event?.stopPropagation?.();

      const link = item.link || "";
      const linkUrl = item.linkUrl || "";
      const action = item.action || "";

      // console.log("提取的字段值:");
      // console.log("- link:", link);
      // console.log("- linkUrl:", linkUrl);
      // console.log("- action:", action);

      // 1. 优先使用link字段
      if (link && link.trim()) {
        const cleanLink = link.trim();
        // console.log("使用link字段跳转:", cleanLink);
        if (
          cleanLink.startsWith("http://") ||
          cleanLink.startsWith("https://")
        ) {
          // console.log("外部链接，新窗口打开");
          window.open(cleanLink, "_blank");
          return;
        }
        if (cleanLink.startsWith("/")) {
          // console.log("内部路径跳转");
          router.push(cleanLink);
          return;
        }
        // console.log("link字段格式无效:", cleanLink);
      }

      // 2. 其次使用linkUrl字段
      if (linkUrl && linkUrl.trim()) {
        const cleanLinkUrl = linkUrl.trim();
        // console.log("使用linkUrl字段跳转:", cleanLinkUrl);
        if (
          cleanLinkUrl.startsWith("http://") ||
          cleanLinkUrl.startsWith("https://")
        ) {
          // console.log("外部链接，新窗口打开");
          window.open(cleanLinkUrl, "_blank");
          return;
        }
        if (cleanLinkUrl.startsWith("/")) {
          // console.log("内部路径跳转");
          router.push(cleanLinkUrl);
          return;
        }
        // console.log("linkUrl字段格式无效:", cleanLinkUrl);
      }

      // 3. 最后使用action字段
      if (action && action.trim()) {
        const cleanAction = action.trim();
        // console.log("使用action字段跳转:", cleanAction);

        // 如果action本身就是URL
        if (
          cleanAction.startsWith("http://") ||
          cleanAction.startsWith("https://")
        ) {
          // console.log("action是外部链接");
          window.open(cleanAction, "_blank");
          return;
        }
        if (cleanAction.startsWith("/")) {
          // console.log("action是内部路径");
          router.push(cleanAction);
          return;
        }

        // 预设关键字处理
        // console.log("处理action关键字:", cleanAction);
        switch (cleanAction.toLowerCase()) {
          case "register":
          case "exhibit":
            // console.log("跳转到参展报名");
            router.push("/exhibit-registration");
            return;
          case "visitor":
          case "preregister":
            // console.log("跳转到观众预登记");
            router.push("/visitor-preregistration");
            return;
          case "contact":
            // console.log("跳转到联系我们");
            router.push("/contact");
            return;
          case "learn":
          case "about":
            // console.log("跳转到关于我们");
            router.push("/about");
            return;
          default:
            console.log("未识别的action关键字:", cleanAction);
        }
      }

      // console.log("没有找到有效的跳转配置");
    };

    const handleEventAction = (event) => {
      // 处理重点活动宣传的按钮点击
      // console.log("活动按钮点击:", event.title);
      // 这里可以根据不同活动跳转到不同页面
      router.push("/register");
    };

    const playVideo = () => {
      console.log("播放视频被点击");
      isVideoPlaying.value = true;

      // 使用nextTick确保DOM更新后再播放
      nextTick(() => {
        if (videoPlayer.value) {
          videoPlayer.value
            .play()
            .then(() => {
              console.log("视频开始播放");
            })
            .catch((error) => {
              console.log("视频播放失败:", error);
              isVideoPlaying.value = false;
            });
        }
      });
    };

    const pauseVideo = () => {
      console.log("暂停视频被点击");
      if (videoPlayer.value) {
        videoPlayer.value.pause();
        console.log("视频已暂停");
      }
    };

    const onVideoEnded = () => {
      isVideoPlaying.value = false;
    };

    const onVideoLoadStart = () => {
      isVideoLoading.value = true;
    };

    const onVideoCanPlay = () => {
      isVideoLoading.value = false;
    };

    const onVideoPlay = () => {
      console.log("视频播放事件触发");
      isVideoPlaying.value = true;
    };

    const onVideoPause = () => {
      console.log("视频暂停事件触发");
      isVideoPlaying.value = false;
    };

    const onVideoError = (error) => {
      console.log("视频加载错误:", error);
      isVideoPlaying.value = false;
      isVideoLoading.value = false;
      videoError.value = true;
      // 显示错误提示
      ElMessage.warning("视频加载失败，显示宣传图片");
    };

    const retryVideo = () => {
      videoError.value = false;
      isVideoLoading.value = true;
      // 重新加载视频
      if (videoPlayer.value) {
        videoPlayer.value.load();
        // 如果重试失败，2秒后自动显示宣传图片
        setTimeout(() => {
          if (isVideoLoading.value) {
            videoError.value = true;
            isVideoLoading.value = false;
          }
        }, 2000);
      }
    };

    const getIconComponent = (iconName) => {
      const iconMap = {
        Trophy: Trophy,
        User: User,
        Setting: Setting,
        Star: Star,
        Connection: Connection,
      };
      return iconMap[iconName] || Trophy;
    };

    // 加载首页数据
    const loadHomepageData = async () => {
      try {
        // console.log("开始加载首页数据...");

        // 加载轮播图数据
        try {
          const carouselResponse = await homepageApi.getCarouselData();
          // console.log("轮播图API响应:", carouselResponse);

          if (
            carouselResponse &&
            carouselResponse.code === "200" &&
            carouselResponse.data
          ) {
            carouselData.value = carouselResponse.data.map((item, idx) => {
              // console.log(`=== 解析轮播图数据 ${idx + 1} ===`);
              // console.log("原始item:", JSON.stringify(item, null, 2));

              let parsed = {};
              try {
                parsed = item.content
                  ? typeof item.content === "string"
                    ? JSON.parse(item.content)
                    : item.content
                  : {};
                // console.log("解析的content:", JSON.stringify(parsed, null, 2));
              } catch (e) {
                console.error("content解析失败:", e);
              }

              const result = {
                ...item,
                title: selectLangField(
                  parsed,
                  "title",
                  selectLangField(item, "title", item.title || "")
                ),
                subtitle: selectLangField(
                  parsed,
                  "subtitle",
                  item.subtitle || ""
                ),
                buttonText: selectLangField(
                  parsed,
                  "buttonText",
                  item.buttonText || ""
                ),
                image: selectLangField(
                  parsed,
                  "backgroundImage",
                  item.imageUrl || item.image || ""
                ),
                action: selectLangField(parsed, "action", item.action || ""),
                link: selectLangField(parsed, "link", item.link || ""),
                linkUrl: selectLangField(parsed, "linkUrl", item.linkUrl || ""),
              };

              // console.log("最终轮播图数据:", JSON.stringify(result, null, 2));
              return result;
            });
            // console.log("轮播图数据加载成功:", carouselData.value);
          } else {
            console.warn("轮播图API响应无效，使用空数据");
            carouselData.value = [];
          }
        } catch (carouselError) {
          console.error("轮播图数据加载失败:", carouselError);
          carouselData.value = [];
        }

        // 设置初始背景图片
        if (carouselData.value.length > 0) {
          currentCarouselImage.value = `url(${carouselData.value[0].image})`;
        }

        // 加载展会亮点数据
        try {
          const highlightsResponse = await homepageApi.getHighlightsData();
          if (
            highlightsResponse &&
            highlightsResponse.code === "200" &&
            highlightsResponse.data
          ) {
            highlightsData.value = highlightsResponse.data.map((item, idx) => {
              let parsed = {};
              try {
                parsed = item.content
                  ? typeof item.content === "string"
                    ? JSON.parse(item.content)
                    : item.content
                  : {};
              } catch {}
              return {
                ...item,
                title: selectLangField(
                  parsed,
                  "subtitle",
                  selectLangField(item, "title", item.title || "")
                ),
                description: selectLangField(
                  parsed,
                  "content",
                  item.subtitle || ""
                ),
                image: selectLangField(
                  parsed,
                  "backgroundImage",
                  item.imageUrl || ""
                ),
              };
            });
          } else {
            highlightsData.value = [];
          }
        } catch (highlightsError) {
          console.error("展会亮点数据加载失败:", highlightsError);
          highlightsData.value = [];
        }

        // 加载展会主视觉数据
        try {
          const mainVisualResponse = await homepageApi.getMainVisualData();
          if (
            mainVisualResponse &&
            mainVisualResponse.code === "200" &&
            mainVisualResponse.data
          ) {
            const item = mainVisualResponse.data;
            let parsed = {};
            try {
              parsed = item.content
                ? typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content
                : {};
            } catch {}
            mainVisualData.value = {
              ...item,
              title: selectLangField(
                parsed,
                "title",
                selectLangField(item, "title", item.title || "")
              ),
              subtitle: selectLangField(
                parsed,
                "subtitle",
                item.subtitle || ""
              ),
              imageUrl: selectLangField(
                parsed,
                "backgroundImage",
                item.imageUrl || ""
              ),
            };
          }
        } catch (mainVisualError) {
          console.error("展会主视觉数据加载失败:", mainVisualError);
        }

        // 加载展会概览数据
        try {
          const overviewResponse = await homepageApi.getOverviewStats();
          // console.log("展会概览API响应:", overviewResponse);

          if (
            overviewResponse &&
            overviewResponse.code === "200" &&
            overviewResponse.data
          ) {
            const data = overviewResponse.data;
            overviewStats.value = {
              ...data,
              title: selectLangField(data, "title", data.title || ""),
              subtitle: selectLangField(data, "subtitle", data.subtitle || ""),
              stats: Array.isArray(data.stats)
                ? data.stats.map((s) => ({
                    ...s,
                    label: selectLangField(s, "label", s.label || ""),
                    number: selectLangField(s, "number", s.number || ""),
                  }))
                : [],
            };
            // console.log("展会概览数据加载成功:", overviewStats.value);
            // 启动数字动画
            setTimeout(startStatsAnimation, 500);
          } else {
            console.warn("展会概览API响应无效，使用默认数据");
            // 使用默认概览数据
            overviewStats.value = {
              title: "展会概览",
              subtitle: "展会基本情况统计",
              stats: [
                { number: "15000m²", label: "展会面积" },
                { number: "500+", label: "展商数量" },
                { number: "50000+", label: "观众数量" },
                { number: "100+", label: "海外观展团" },
                { number: "40+", label: "同期活动" },
              ],
            };
            // 启动数字动画
            setTimeout(startStatsAnimation, 500);
          }
        } catch (overviewError) {
          console.error("展会概览数据加载失败:", overviewError);
          // 使用默认概览数据
          overviewStats.value = {
            title: "展会概览",
            subtitle: "展会基本情况统计",
            stats: [
              { number: "15000m²", label: "展会面积" },
              { number: "500+", label: "展商数量" },
              { number: "50000+", label: "观众数量" },
              { number: "100+", label: "海外观展团" },
              { number: "40+", label: "同期活动" },
            ],
          };
          // 启动数字动画
          setTimeout(startStatsAnimation, 500);
        }

        // 加载活动数据
        try {
          const eventsResponse = await homepageApi.getEventsData();
          // console.log("重点活动API响应:", eventsResponse);

          if (
            eventsResponse &&
            eventsResponse.code === "200" &&
            eventsResponse.data
          ) {
            // 转换数据格式以匹配前端期望
            eventsData.value = eventsResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                title: selectLangField(
                  contentData,
                  "subtitle",
                  selectLangField(item, "title", item.title || "")
                ),
                description: selectLangField(
                  contentData,
                  "content",
                  item.subtitle || "精彩活动，敬请期待"
                ),
                image: selectLangField(
                  contentData,
                  "backgroundImage",
                  item.imageUrl ||
                    "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=800&h=400&fit=crop"
                ),
                buttonText: selectLangField(
                  contentData,
                  "buttonText",
                  "了解更多"
                ),
              };
            });
            // console.log("重点活动数据加载成功:", eventsData.value);
          } else {
            console.warn("重点活动API响应无效，使用默认数据");
            // 使用默认活动数据
            eventsData.value = [
              {
                id: 1,
                title: "机器人产业技术创新论坛",
                description: "邀请行业专家分享最新技术趋势和发展方向",
                image:
                  "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&h=400&fit=crop",
                buttonText: "立即报名",
              },
              {
                id: 2,
                title: "智能制造解决方案展示",
                description: "展示最新的智能制造技术和解决方案",
                image:
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=400&fit=crop",
                buttonText: "了解更多",
              },
            ];
          }
        } catch (eventsError) {
          console.error("活动数据加载失败:", eventsError);
          eventsData.value = [];
        }

        // 加载展区数据
        try {
          const zonesResponse = await homepageApi.getZonesData();
          // console.log("展区数据API响应:", zonesResponse);

          if (
            zonesResponse &&
            zonesResponse.code === "200" &&
            zonesResponse.data
          ) {
            zonesData.value = zonesResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                name: selectLangField(
                  contentData,
                  "subtitle",
                  selectLangField(item, "title", item.title || "")
                ),
                description: selectLangField(
                  contentData,
                  "content",
                  item.subtitle || "精彩展区，敬请期待"
                ),
                image:
                  item.imageUrl ||
                  "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=400&h=300&fit=crop",
                features: contentData.features || [
                  "专业展示",
                  "技术交流",
                  "商业合作",
                  "创新展示",
                ],
              };
            });
            // console.log("展区数据加载成功:", zonesData.value);
          } else {
            zonesData.value = [];
          }
        } catch (zonesError) {
          console.error("展区数据加载失败:", zonesError);
          zonesData.value = [];
        }

        // 加载图片画廊数据
        try {
          const galleryResponse = await homepageApi.getGalleryData();
          // console.log("图片画廊API响应:", galleryResponse);

          if (
            galleryResponse &&
            galleryResponse.code === "200" &&
            galleryResponse.data
          ) {
            galleryImages.value = galleryResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                title: selectLangField(
                  contentData,
                  "subtitle",
                  selectLangField(item, "title", item.title || "展会精彩瞬间")
                ),
                description: selectLangField(
                  contentData,
                  "content",
                  item.subtitle || "精彩瞬间"
                ),
                url:
                  item.imageUrl ||
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1200&h=400&fit=crop",
              };
            });
            galleryData.value = galleryResponse.data[0] || {}; // 获取画廊数据中的标题
            // console.log("图片画廊数据加载成功:", galleryImages.value);
          }
        } catch (galleryError) {
          console.error("图片画廊数据加载失败:", galleryError);
        }

        // 加载展会现场直播数据
        try {
          const liveResponse = await homepageApi.getLiveData();
          if (
            liveResponse &&
            liveResponse.code === "200" &&
            liveResponse.data
          ) {
            const data = liveResponse.data || {};
            const images = Array.isArray(data.images)
              ? [...data.images]
                  .filter(
                    (img) =>
                      img &&
                      (img.status === undefined || img.status === "active")
                  )
                  .sort((a, b) => (a?.sort || 0) - (b?.sort || 0))
              : [];
            liveData.value = {
              title: selectLangField(
                data,
                "title",
                data.title || "展会现场直播"
              ),
              subtitle: selectLangField(
                data,
                "subtitle",
                data.subtitle || "实时观看展会精彩瞬间"
              ),
              status: data.status || "LIVE",
              viewers: data.viewers || "0",
              images: images.map((img) => ({
                ...img,
                title: selectLangField(
                  img,
                  "title",
                  img.title || "展会现场直播"
                ),
                description: selectLangField(
                  img,
                  "description",
                  img.description || ""
                ),
                url: img.url,
              })),
            };
            // console.log("展会现场直播数据加载成功:", liveData.value);
          } else {
            console.warn("展会现场直播API响应无效，使用默认数据");
            liveData.value = {
              title: "展会现场直播",
              subtitle: "实时观看展会精彩瞬间",
              status: "LIVE",
              viewers: "0",
              images: [],
            };
          }
        } catch (liveError) {
          console.error("展会现场直播数据加载失败:", liveError);
          liveData.value = {
            title: "展会现场直播",
            subtitle: "实时观看展会精彩瞬间",
            status: "LIVE",
            viewers: "0",
            images: [],
          };
        }

        // 加载新闻数据
        try {
          const newsResponse = await homepageApi.getNewsData();
          // console.log("新闻数据API响应:", newsResponse);

          if (
            newsResponse &&
            newsResponse.code === "200" &&
            newsResponse.data
          ) {
            newsData.value = newsResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                title: selectLangField(
                  contentData,
                  "subtitle",
                  selectLangField(item, "title", item.title || "")
                ),
                excerpt: selectLangField(
                  contentData,
                  "content",
                  contentData.excerpt ||
                    item.subtitle ||
                    "精彩内容，敬请期待..."
                ),
                image:
                  item.imageUrl ||
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=250&fit=crop",
                date: item.createdTime
                  ? item.createdTime.split(" ")[0]
                  : "2024-12-01",
                category: selectLangField(contentData, "category", "展会动态"),
              };
            });
            // console.log("新闻数据加载成功:", newsData.value);
          }
        } catch (newsError) {
          console.error("新闻数据加载失败:", newsError);
        }

        // 加载展商评价数据
        try {
          const testimonialsResponse = await homepageApi.getTestimonialsData();
          // console.log("展商评价API响应:", testimonialsResponse);

          if (
            testimonialsResponse &&
            testimonialsResponse.code === "200" &&
            testimonialsResponse.data
          ) {
            testimonialsData.value = testimonialsResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                company: selectLangField(
                  contentData,
                  "company",
                  selectLangField(item, "title", item.title || "参展企业")
                ),
                content: selectLangField(
                  contentData,
                  "content",
                  contentData.description ||
                    item.subtitle ||
                    "非常满意的展会体验"
                ),
                image:
                  item.imageUrl ||
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
              };
            });
            // console.log("展商评价数据加载成功:", testimonialsData.value);
          } else {
            // 使用默认展商评价数据（基于图片内容）
            testimonialsData.value = [
              {
                id: 1,
                company: "创维集团",
                content:
                  "FAIR plus是唯一的机器人全产业链式的展会,展会人流量及观众国际化,现场技术交流及论坛会议质量让创维在FAIR plus活动现场,收获了国内及海外采购团,会后加拿大海外采购团首要到集团参观交流,已与加拿大扫地机企业初步达成战略合作意愿!",
                image:
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
              },
              {
                id: 2,
                company: "优必选",
                content:
                  'FAIR plus 展会凭借其在全球机器人产业协同创新领域的标杆地位,成功吸引了大量专业观众及媒体的目光,为优必选"天工行者"全尺寸科研人形机器人创造了众多宣传推广的契机。展会期间的现场技术交流活动以及专业院校的论坛会议,为优必选科技的"天工行者共研共创计划"赋能添彩,成功收获了许多意向合作机构。',
                image:
                  "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
              },
            ];
            // console.log("使用默认展商评价数据:", testimonialsData.value);
          }
        } catch (testimonialsError) {
          console.error("展商评价数据加载失败:", testimonialsError);
          // 使用默认展商评价数据
          testimonialsData.value = [
            {
              id: 1,
              company: "创维集团",
              content:
                "FAIR plus是唯一的机器人全产业链式的展会,展会人流量及观众国际化,现场技术交流及论坛会议质量让创维在FAIR plus活动现场,收获了国内及海外采购团,会后加拿大海外采购团首要到集团参观交流,已与加拿大扫地机企业初步达成战略合作意愿!",
              image:
                "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
            },
            {
              id: 2,
              company: "优必选",
              content:
                'FAIR plus 展会凭借其在全球机器人产业协同创新领域的标杆地位,成功吸引了大量专业观众及媒体的目光,为优必选"天工行者"全尺寸科研人形机器人创造了众多宣传推广的契机。展会期间的现场技术交流活动以及专业院校的论坛会议,为优必选科技的"天工行者共研共创计划"赋能添彩,成功收获了许多意向合作机构。',
              image:
                "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
            },
          ];
        }

        // 加载合作伙伴数据
        try {
          const partnersResponse = await homepageApi.getPartnersData();
          // console.log("合作伙伴API响应:", partnersResponse);

          if (
            partnersResponse &&
            partnersResponse.code === "200" &&
            partnersResponse.data
          ) {
            partnersData.value = partnersResponse.data.map((item) => {
              const contentData = item.content ? JSON.parse(item.content) : {};
              return {
                id: item.id,
                name: selectLangField(
                  contentData,
                  "name",
                  selectLangField(item, "title", item.title || "合作伙伴")
                ),
                logo:
                  item.imageUrl ||
                  "https://via.placeholder.com/200x80/667eea/ffffff?text=" +
                    encodeURIComponent(item.title || "合作伙伴"),
              };
            });
            // console.log("合作伙伴数据加载成功:", partnersData.value);
          }
        } catch (partnersError) {
          console.error("合作伙伴数据加载失败:", partnersError);
        }

        // 加载视频宣传片数据
        try {
          const videoResponse = await homepageApi.getVideoData();
          if (
            videoResponse &&
            videoResponse.code === "200" &&
            videoResponse.data
          ) {
            const data = videoResponse.data;
            let parsed = {};
            try {
              parsed = data.content
                ? typeof data.content === "string"
                  ? JSON.parse(data.content)
                  : data.content
                : {};
            } catch {}
            videoData.value = {
              ...data,
              title: selectLangField(
                parsed,
                "title",
                selectLangField(data, "title", data.title || "")
              ),
              subtitle: selectLangField(
                parsed,
                "subtitle",
                data.subtitle || ""
              ),
              coverImage: selectLangField(
                parsed,
                "backgroundImage",
                data.coverImage || ""
              ),
              videoTitle: selectLangField(
                parsed,
                "videoTitle",
                data.videoTitle || ""
              ),
              videoSubtitle: selectLangField(
                parsed,
                "videoSubtitle",
                data.videoSubtitle || ""
              ),
              description: selectLangField(
                parsed,
                "content",
                data.description || ""
              ),
              features: Array.isArray(parsed.features)
                ? parsed.features
                : data.features || [],
            };
            // console.log("视频宣传片数据加载成功:", videoData.value);
          } else {
            console.warn("视频宣传片API响应无效，使用默认数据");
            // 使用默认视频数据
            videoData.value = {
              title: "展会宣传片",
              subtitle: "观看FAIR plus机器人全产业链接会官方宣传片",
              coverImage:
                "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=450&fit=crop",
              videoTitle: "FAIR plus机器人全产业链接会 2025",
              videoSubtitle: "官方宣传片",
              duration: "03:45",
              description: "点击播放展会宣传片",
              features: ["4K高清", "官方制作", "精彩回顾"],
            };
          }
        } catch (videoError) {
          // 使用默认视频数据
          videoData.value = {
            title: "展会宣传片",
            subtitle: "观看FAIR plus机器人全产业链接会官方宣传片",
            coverImage:
              "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=450&fit=crop",
            videoTitle: "FAIR plus机器人全产业链接会 2025",
            videoSubtitle: "官方宣传片",
            duration: "03:45",
            description: "点击播放展会宣传片",
            features: ["4K高清", "官方制作", "精彩回顾"],
          };
        }

        // 加载参展企业数据（从homepage_content表获取exhibitor类型数据）
        try {
          const exhibitorsResponse = await homepageApi.getExhibitorData();
          if (
            exhibitorsResponse &&
            exhibitorsResponse.code === "200" &&
            exhibitorsResponse.data
          ) {
            const data = exhibitorsResponse.data;

            // 设置参展企业区域标题和统计信息
            const exhibitorsInfo = {
              title: selectLangField(
                data,
                "title",
                data.title || "参展企业陆续更新中"
              ),
              subtitle: selectLangField(
                data,
                "subtitle",
                data.subtitle || "已确认参展企业"
              ),
              totalCount: data.totalCount || 0,
              groupCount: data.groupCount || 0,
              lastUpdate:
                data.lastUpdate || new Date().toLocaleDateString("zh-CN"),
            };

            // 设置分组数据
            if (data.groups && Array.isArray(data.groups)) {
              exhibitorGroups.value = data.groups.map((group) =>
                group.map((ex) => ({
                  ...ex,
                  name: selectLangField(ex, "name", ex.name || ""),
                }))
              );

              // 将所有参展企业数据合并到一个数组中
              exhibitorsData.value = data.groups.flat().map((ex) => ({
                ...ex,
                name: selectLangField(ex, "name", ex.name || ""),
              }));
            } else {
              exhibitorGroups.value = [];
              exhibitorsData.value = [];
            }
          } else {
            // 使用默认参展企业数据
            const defaultExhibitors = [
              {
                id: 1,
                name: "ABB",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=ABB",
                group: 1,
                sort: 1,
                status: "active",
              },
              {
                id: 2,
                name: "KUKA",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KUKA",
                group: 1,
                sort: 2,
                status: "active",
              },
              {
                id: 3,
                name: "FANUC",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=FANUC",
                group: 1,
                sort: 3,
                status: "active",
              },
              {
                id: 4,
                name: "YASKAWA",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=YASKAWA",
                group: 1,
                sort: 4,
                status: "active",
              },
              {
                id: 5,
                name: "SIEMENS",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=SIEMENS",
                group: 1,
                sort: 5,
                status: "active",
              },
              {
                id: 6,
                name: "MITSUBISHI",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=MITSUBISHI",
                group: 1,
                sort: 6,
                status: "active",
              },
              {
                id: 7,
                name: "KOMATSU",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KOMATSU",
                group: 1,
                sort: 7,
                status: "active",
              },
              {
                id: 8,
                name: "HITACHI",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=HITACHI",
                group: 1,
                sort: 8,
                status: "active",
              },
              {
                id: 9,
                name: "PANASONIC",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=PANASONIC",
                group: 1,
                sort: 9,
                status: "active",
              },
              {
                id: 10,
                name: "OMRON",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=OMRON",
                group: 1,
                sort: 10,
                status: "active",
              },
              {
                id: 11,
                name: "KEYENCE",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KEYENCE",
                group: 1,
                sort: 11,
                status: "active",
              },
              {
                id: 12,
                name: "COGNEX",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=COGNEX",
                group: 1,
                sort: 12,
                status: "active",
              },
              {
                id: 13,
                name: "BOSCH",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=BOSCH",
                group: 1,
                sort: 13,
                status: "active",
              },
              {
                id: 14,
                name: "SCHNEIDER",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=SCHNEIDER",
                group: 1,
                sort: 14,
                status: "active",
              },
              {
                id: 15,
                name: "ROCKWELL",
                logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=ROCKWELL",
                group: 1,
                sort: 15,
                status: "active",
              },
            ];

            exhibitorGroups.value = [defaultExhibitors];
            exhibitorsData.value = defaultExhibitors;
          }
        } catch (exhibitorsError) {
          console.error("参展企业数据加载失败:", exhibitorsError);
          // 使用默认数据
          const defaultExhibitors = [
            {
              id: 1,
              name: "ABB",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=ABB",
              group: 1,
              sort: 1,
              status: "active",
            },
            {
              id: 2,
              name: "KUKA",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KUKA",
              group: 1,
              sort: 2,
              status: "active",
            },
            {
              id: 3,
              name: "FANUC",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=FANUC",
              group: 1,
              sort: 3,
              status: "active",
            },
            {
              id: 4,
              name: "YASKAWA",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=YASKAWA",
              group: 1,
              sort: 4,
              status: "active",
            },
            {
              id: 5,
              name: "SIEMENS",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=SIEMENS",
              group: 1,
              sort: 5,
              status: "active",
            },
            {
              id: 6,
              name: "MITSUBISHI",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=MITSUBISHI",
              group: 1,
              sort: 6,
              status: "active",
            },
            {
              id: 7,
              name: "KOMATSU",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KOMATSU",
              group: 1,
              sort: 7,
              status: "active",
            },
            {
              id: 8,
              name: "HITACHI",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=HITACHI",
              group: 1,
              sort: 8,
              status: "active",
            },
            {
              id: 9,
              name: "PANASONIC",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=PANASONIC",
              group: 1,
              sort: 9,
              status: "active",
            },
            {
              id: 10,
              name: "OMRON",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=OMRON",
              group: 1,
              sort: 10,
              status: "active",
            },
            {
              id: 11,
              name: "KEYENCE",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=KEYENCE",
              group: 1,
              sort: 11,
              status: "active",
            },
            {
              id: 12,
              name: "COGNEX",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=COGNEX",
              group: 1,
              sort: 12,
              status: "active",
            },
            {
              id: 13,
              name: "BOSCH",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=BOSCH",
              group: 1,
              sort: 13,
              status: "active",
            },
            {
              id: 14,
              name: "SCHNEIDER",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=SCHNEIDER",
              group: 1,
              sort: 14,
              status: "active",
            },
            {
              id: 15,
              name: "ROCKWELL",
              logo: "https://via.placeholder.com/120x80/667eea/ffffff?text=ROCKWELL",
              group: 1,
              sort: 15,
              status: "active",
            },
          ];

          exhibitorGroups.value = [defaultExhibitors];
          exhibitorsData.value = defaultExhibitors;
        }
      } catch (error) {
        console.error("加载首页数据失败:", error);
        // 如果API加载失败，使用默认数据
        loadDefaultData();
      }
    };

    // 加载默认数据（API失败时的回退）
    const loadDefaultData = () => {
      carouselData.value = [
        {
          title: "FAIR plus机器人全产业链接会 2025",
          subtitle: "汇聚全球机器人精英，共创智能制造未来",
          image:
            "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1920&h=600&fit=crop",
          buttonText: "立即报名",
          action: "register",
        },
      ];

      highlightsData.value = [
        {
          id: 1,
          icon: "Trophy",
          title: "行业权威",
          description: "华南地区最具影响力的工业展览会，汇聚行业顶尖企业",
        },
        {
          id: 2,
          icon: "User",
          title: "专业观众",
          description: "50,000+专业观众，涵盖制造业各领域决策者",
        },
      ];

      // 设置默认概览数据
      overviewStats.value = {
        title: "展会概览",
        subtitle: "展会基本情况统计",
        stats: [
          { number: "15000m²", label: "展会面积" },
          { number: "500+", label: "展商数量" },
          { number: "50000+", label: "观众数量" },
          { number: "100+", label: "海外观展团" },
          { number: "40+", label: "同期活动" },
        ],
      };
    };

    // 页面加载时获取数据
    nextTick(() => {
      loadHomepageData();
    });

    // 展商评价数据分组（根据数量决定显示方式）
    const testimonialGroups = computed(() => {
      const data = Array.isArray(testimonialsData.value)
        ? testimonialsData.value
        : [];
      const groups = [];

      if (data.length === 4) {
        // 如果有4个，一排显示4个
        groups.push(data);
      } else if (data.length === 5) {
        // 如果有5个，一排显示3个然后滚动
        groups.push(data.slice(0, 3));
        groups.push(data.slice(3, 5));
      } else {
        // 其他情况，每3个一组
        for (let i = 0; i < data.length; i += 3) {
          groups.push(data.slice(i, i + 3));
        }
      }
      return groups;
    });

    // 参展企业数据分组（三行，每行10个）
    const firstRowExhibitors = computed(() => {
      const data = Array.isArray(exhibitorsData.value)
        ? exhibitorsData.value
        : [];
      return data.slice(0, 10);
    });

    const secondRowExhibitors = computed(() => {
      const data = Array.isArray(exhibitorsData.value)
        ? exhibitorsData.value
        : [];
      return data.slice(10, 20);
    });

    const thirdRowExhibitors = computed(() => {
      const data = Array.isArray(exhibitorsData.value)
        ? exhibitorsData.value
        : [];
      return data.slice(20, 30);
    });

    const exhibitorLogos = computed(() => {
      const data = exhibitorsData.value?.list || [];
      return data.slice(0, 20);
    });

    const secondRowExhibitorLogos = computed(() => {
      const data = exhibitorsData.value?.list || [];
      return data.slice(20, 30);
    });

    // 动态设置头部高度变量，确保轮播图紧贴 header 下沿且不被遮挡
    const setHeaderHeightVar = () => {
      try {
        const headerEl =
          document.querySelector("header") ||
          document.querySelector(".site-header") ||
          document.querySelector("#app header");
        const headerH =
          headerEl && headerEl.offsetHeight ? headerEl.offsetHeight : 70;
        document.documentElement.style.setProperty(
          "--header-h",
          headerH + "px"
        );
      } catch (e) {
        document.documentElement.style.setProperty("--header-h", "70px");
      }
    };

    const handleResize = () => setHeaderHeightVar();

    // 点击查看更多瞬间展会精彩
    const viewMoreCarouselChange = (index) => {
      carouselActiveIndex.value = index;
    };
    const clickViewMore = () => {
      // console.log(carouselActiveIndex.value);
      const currentImage = liveData.value?.images[carouselActiveIndex.value];
      if (!currentImage.link) return ElMessage.warning("该展会没有链接");
      // console.log(currentImage.link);
      window.open(currentImage.link, "_blank");

      // router.push({ name: "ExhibitorDirectory" });
    };
    onMounted(() => {
      setHeaderHeightVar();
      window.addEventListener("resize", handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", handleResize);
    });

    return {
      carouselData,
      currentCarouselImage,
      onCarouselChange,
      highlightsData,
      zonesData,
      newsData,
      testimonialsData,
      testimonialGroups,
      partnersData,
      eventsData,
      exhibitorGroups,
      firstRowExhibitors,
      secondRowExhibitors,
      thirdRowExhibitors,
      galleryImages,
      mainVisualData,
      overviewStats,
      animatedStats,
      videoData,
      liveData,
      galleryData,
      exhibitorsData,
      carouselActiveIndex,

      handleCarouselAction,
      handleEventAction,
      playVideo,
      pauseVideo,
      onVideoEnded,
      onVideoPlay,
      onVideoPause,
      onVideoError,
      retryVideo,
      getIconComponent,
      videoPlayer,
      isVideoPlaying,
      isVideoLoading,
      videoError,
      exhibitorLogos,
      secondRowExhibitorLogos,
      clickViewMore,
      viewMoreCarouselChange,
    };
  },
};
</script>

<style scoped>
.home {
  position: relative;
  min-height: 100vh;
  /* background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; */
  background: linear-gradient(
    199deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
}

/* 轮播图样式 */
.hero-section {
  margin-bottom: 0;
  /* margin-top: var(--header-h, 70px); */
}

.carousel-item {
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.carousel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: left;
  color: white;
}

.carousel-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.carousel-subtitle {
  font-size: 24px;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* 容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 调整标题为黑色 */
.section-title {
  text-align: center;
  color: #000;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: none;
}
.section-subtitle {
  text-align: center;
  color: #000;
  font-size: 18px;
  margin-bottom: 40px;
  text-shadow: none;
}
.section-subtitle > span {
  display: inline-block;
  padding: 10px;
  border: 2px solid #4a0a8a;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}
.section-subtitle > span:hover {
  /* background-color: #4a0a8a; */
  color: #4a0a8a;
  transition: all 0.5s ease;
}

/* 去掉各区块的暗色遮罩 */
.intro-section {
  background: transparent;
}
.zones-section {
  background: transparent;
}
.partners-section {
  background: transparent;
}
.video-section {
  background: transparent;
  padding: 80px 0;
  min-height: 700px;
}
.overview-section {
  background: var(--e-global-color-home-bg-2) !important;
  padding: 60px 0;
}
.events-section {
  background: transparent;
  padding: 80px 0;
}
.exhibitors-section {
  background: transparent;
  padding: 80px 0;
}
.assistance-section {
  background: transparent;
  padding: 80px 0;
}
.live-section {
  background: transparent;
  padding: 80px 0;
  min-height: 700px;
}
.testimonials-section {
  background: var(--e-global-color-home-bg-1) !important;
  padding: 80px 0;
}

.intro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.intro-text h3 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #2c3e50;
}

.intro-text p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #666;
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.stat-item {
  text-align: center;
}

.stat-item h4 {
  font-size: 32px;
  font-weight: bold;
  color: #320063;
  margin-bottom: 10px;
}

.stat-item p {
  color: #666;
  margin: 0;
}

.intro-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.carousel-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.carousel-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.intro-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 展会亮点样式 */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.highlight-card {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
}

.highlight-icon {
  font-size: 48px;
  color: #320063;
  margin-bottom: 20px;
}

.highlight-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #2c3e50;
}

.highlight-card p {
  color: #666;
  line-height: 1.6;
}

/* 展区介绍样式 */
.zones-section {
  background: rgba(0, 0, 0, 0.4);
}

.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.zone-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.zone-card:hover {
  transform: translateY(-5px);
}

.zone-image {
  height: 200px;
  overflow: hidden;
}

.zone-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zone-content {
  padding: 25px;
}

.zone-content h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #2c3e50;
}

.zone-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.zone-features {
  list-style: none;
  padding: 0;
}

.zone-features li {
  padding: 8px 0;
  color: #667eea;
  position: relative;
  padding-left: 20px;
}

.zone-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

/* 新闻动态样式 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.news-card {
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-image {
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  padding: 20px;
}

.news-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.news-date,
.news-category {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.news-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #2c3e50;
  line-height: 1.4;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.news-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.news-more {
  text-align: center;
}

/* 合作伙伴样式 */
.partners-section {
  background: rgba(0, 0, 0, 0.4);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  align-items: center;
}

.partner-logo {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: translateY(-3px);
}

.partner-logo img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.partner-logo:hover img {
  filter: grayscale(0%);
}

/* 视频区域样式 */
.video-container {
  max-width: 1200px;
  margin: 0 auto;
}

.video-placeholder {
  background: #f0f0f0;
  height: 500px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* match container exactly */
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(50, 0, 99, 0.7) 0%,
    rgba(74, 10, 138, 0.7) 100%
  );
  z-index: 2;
}

/* no scaling to keep within 500px/400px container */
/* .video-placeholder:hover .cover-image { transform: none; } */

.video-placeholder > * {
  position: relative;
  z-index: 2;
}

.video-placeholder:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  padding: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  z-index: 3;
  display: flex;
  /* box-sizing: border-box; */
}

.play-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.play-icon {
  font-size: 60px;
  color: #320063;
  transition: all 0.3s ease;
}

.video-info {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.video-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.video-duration {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.video-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 3;
}

.feature-tag {
  color: white;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 6px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.video-player {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.video-element {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.video-overlay:hover {
  opacity: 1;
}

.pause-button {
  cursor: pointer;
  padding: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.pause-button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.pause-icon {
  font-size: 60px;
  color: white;
  transition: all 0.3s ease;
}

.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 15px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.video-loading p {
  font-size: 16px;
  margin: 0;
}

.video-error-placeholder {
  background: #f0f0f0;
  height: 500px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

.error-icon {
  font-size: 48px;
  color: #ff6b6b;
  margin-bottom: 10px;
}

.error-message {
  color: white;
  font-size: 16px;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.video-error-placeholder > * {
  position: relative;
  z-index: 2;
}

.error-icon {
  font-size: 60px;
  color: #f56c6c;
  margin-bottom: 20px;
}

.video-error-placeholder p {
  font-size: 18px;
  color: white;
  margin-bottom: 20px;
}

.promo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 视频区域样式 */
.video-section {
  /* background: transparent; */
  background: var(--e-global-color-home-bg-2) !important;
  padding: 80px 0;
  min-height: 700px;
}

.section-title {
  text-align: center;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.section-subtitle {
  text-align: center;
  color: #333;
  font-size: 18px;
  margin-bottom: 40px;
  text-shadow: none;
}

.video-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-item {
    height: 100%;
  }

  .carousel-title {
    font-size: 32px;
  }

  .carousel-subtitle {
    font-size: 16px;
  }

  .intro-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intro-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .zones-grid {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-card {
    padding: 20px;
  }

  .video-placeholder {
    height: 400px;
  }

  .video-error-placeholder {
    height: 450px;
  }

  .play-button {
    padding: 20px;
  }

  .play-icon {
    font-size: 50px;
  }

  .video-title {
    font-size: 16px;
  }

  .video-subtitle {
    font-size: 12px;
  }

  .video-features {
    gap: 8px;
  }

  .feature-tag {
    font-size: 10px;
  }
}

/* 新增样式 */
.overview-section {
  background: transparent;
  padding: 60px 0;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-icon {
  margin-bottom: 15px;
}

.stat-icon .el-icon {
  font-size: 2.5rem;
  color: var(--e-global-color-title);
  transition: color 0.3s ease;
}

.stat-item:hover .stat-icon .el-icon {
  color: var(--e-global-color-selected);
}

.stat-item h4 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--e-global-color-title);
  margin-bottom: 10px;
}

.stat-item:hover h4 {
  color: var(--e-global-color-selected) !important;
}

.stat-item p {
  color: #666;
  font-size: 1rem;
}

.events-section {
  background: transparent;
  padding: 80px 0;
}

.events-carousel {
  margin-top: 40px;
}

.event-item {
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.event-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.no-events-placeholder {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  margin-top: 20px;
}

.placeholder-content {
  text-align: center;
  color: #666;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #999;
}

.placeholder-content p {
  font-size: 16px;
  margin: 0;
}

.event-content {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  color: white;
}

.event-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.event-description {
  font-size: 1.1rem;
  margin-bottom: 20px;
  opacity: 0.9;
}

.exhibitors-section {
  /* background: transparent; */
  background: var(--e-global-color-home-bg-2) !important;
  padding: 80px 0;
}

.exhibitors-carousel {
  margin-top: 40px;
}

.exhibitor-row {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

.exhibitor-scroll-left {
  display: flex;
  animation: scrollLeft 45s linear infinite;
  width: fit-content;
}

.exhibitor-scroll-right {
  display: flex;
  animation: scrollRight 45s linear infinite;
  width: fit-content;
}

.exhibitor-group {
  display: flex;
  align-items: center;
  height: 100px;
  gap: 25px;
  padding: 0 20px;
  flex-shrink: 0;
}

.exhibitor-logo {
  width: 180px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  position: relative;
  padding-bottom: 18px;
}

.exhibitor-logo:hover {
  transform: scale(1.05);
}

.exhibitor-logo img {
  max-width: 165px;
  width: 100%;
  height: auto;
  max-height: calc(100% - 18px);
  object-fit: contain;
  margin-bottom: 0;
}

.exhibitor-name {
  font-size: 11px;
  color: #333;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  font-weight: 500;
  width: 100%;
  padding: 0 6px;
  height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.assistance-section {
  background: transparent;
  padding: 80px 0;
}

.assistance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.assistance-item {
  background: white;
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.assistance-item:hover {
  transform: translateY(-5px);
}

.assistance-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 20px;
}

.assistance-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.assistance-item p {
  color: #666;
  line-height: 1.5;
}

.gallery-section {
  padding: 80px 0;
}

.gallery-carousel {
  margin-top: 40px;
}

.gallery-item {
  height: 400px;
  background-size: contain;
  background-position: center;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  color: white;
}

.gallery-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.gallery-description {
  font-size: 1rem;
  opacity: 0.9;
}

.live-section {
  background: var(--e-global-color-home-bg-1) !important;
  padding: 80px 0;
  min-height: 700px;
}

.live-carousel {
  max-width: 1200px;
  margin: 0 auto;
}

.live-carousel .el-carousel__container {
  border-radius: 12px;
  overflow: hidden;
}

/* 展会现场照片轮播图箭头样式优化 */
.live-carousel .el-carousel__arrow {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #320063;
  color: #320063;
  font-size: 20px;
  font-weight: bold;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.live-carousel .el-carousel__arrow:hover {
  background-color: #320063;
  color: white;
  border-color: #320063;
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(50, 0, 99, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.9);
}

.live-carousel .el-carousel__arrow--left {
  left: 20px;
}

.live-carousel .el-carousel__arrow--right {
  right: 20px;
}

.live-item {
  height: 550px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 12px;
}

.live-link {
  display: block;
}

.live-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.live-preview img {
  width: 100%;
  height: 550px;
  object-fit: contain;
}

.live-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.live-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.live-info p {
  font-size: 1rem;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* 展商评价样式 */
.testimonials-section {
  background: transparent;
  padding: 80px 0;
}

.testimonials-content {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-carousel {
  max-width: 1200px;
  margin: 0 auto;
}

/* 展商评价轮播图箭头样式优化 */
.testimonials-carousel .el-carousel__arrow {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid #320063;
  color: #320063;
  font-size: 20px;
  font-weight: bold;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 10;
}

.testimonials-carousel .el-carousel__arrow:hover {
  background-color: #320063;
  color: white;
  border-color: #320063;
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(50, 0, 99, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.9);
}

.testimonials-carousel .el-carousel__arrow--left {
  left: 20px;
}

.testimonials-carousel .el-carousel__arrow--right {
  right: 20px;
}

/* 展商评价轮播图指示器样式优化 */
.testimonials-carousel .el-carousel__indicators {
  bottom: -40px;
}

.testimonials-carousel .el-carousel__indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px solid #320063;
  margin: 0 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.testimonials-carousel .el-carousel__indicator.is-active {
  background-color: #320063;
  border-color: #320063;
  transform: scale(1.3);
  box-shadow: 0 4px 12px rgba(50, 0, 99, 0.4);
}

.testimonials-carousel .el-carousel__indicator:hover {
  background-color: rgba(50, 0, 99, 0.8);
  border-color: #320063;
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(50, 0, 99, 0.3);
}

.testimonials-row {
  display: flex;
  gap: 2rem;
  padding: 0 1rem;
  justify-content: center;
  align-items: stretch;
}

/* 当有4个评价时，每个卡片占25%宽度 */
.testimonials-row:has(.testimonial-card:nth-child(4):last-child)
  .testimonial-card {
  flex: 0 0 calc(25% - 1.5rem);
  max-width: calc(25% - 1.5rem);
}

/* 当有3个评价时，每个卡片占33.33%宽度 */
.testimonials-row:has(.testimonial-card:nth-child(3):last-child)
  .testimonial-card {
  flex: 0 0 calc(33.33% - 1.33rem);
  max-width: calc(33.33% - 1.33rem);
}

.testimonial-card {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-content {
  flex: 1;
  padding: 1.5rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-text {
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
  text-align: justify;
}

.testimonial-footer {
  /* padding: 1.2rem 1.5rem; */
  /* border-bottom: 1px solid #f0f0f0; */
  /* display: flex;
  align-items: center;
  gap: 1rem; */
  background: #fafafa;
  margin-top: auto;
}

.testimonial-image {
  /* flex-shrink: 0; */
  width: 100%;
  padding-bottom: 50%;
  /* height: 80px; */
  /* border-radius: 50%; */
  position: relative;
  overflow: hidden;
  /* border: 2px solid #e0e0e0; */
}

.testimonial-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-info {
  padding: 20px;
  padding-bottom: 10px;
  background-color: #fff;
  /* flex: 1; */
}

.company-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--e-global-color-title);
  margin: 0;
  line-height: 1.3;
}

.testimonials-placeholder {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.placeholder-icon {
  font-size: 3rem;
  color: #ddd;
}

.testimonials-placeholder p {
  color: #999;
  font-size: 1.1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .testimonials-row {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    align-items: center;
  }

  .testimonial-card {
    width: 100%;
    max-width: 400px;
    min-height: auto;
  }

  .testimonial-content {
    padding: 1rem;
  }

  /* .testimonial-footer { */
  /* padding: 1rem; */
  /* } */

  /* .testimonial-image {
    width: 70px;
    height: 70px;
  } */

  .company-name {
    font-size: 1rem;
  }
}

/* 展会主视觉样式 */
.main-visual-section {
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  color: white;
  padding: 80px 0;
}

.main-visual-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.visual-text h2 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.visual-text p {
  font-size: 1.5rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.visual-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
}

.visual-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.testimonials-list {
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 20px;
  @media (max-width: 768px) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.testimonials-list > .testimonial-card {
  width: 100% !important;
  max-width: 600px !important;
}

/* 响应式设计补充 */
@media (max-width: 768px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .assistance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .exhibitor-row {
    margin-bottom: 15px;
  }

  .exhibitor-group {
    gap: 20px;
    padding: 0 10px;
  }

  .exhibitor-logo {
    width: 80px;
    height: 70px;
  }

  .exhibitor-name {
    font-size: 10px;
  }

  .event-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .event-title {
    font-size: 1.5rem;
  }

  .gallery-overlay {
    padding: 20px;
  }

  .gallery-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .carousel-item {
    height: 100%;
  }

  .overview-stats {
    grid-template-columns: 1fr;
  }

  .assistance-grid {
    grid-template-columns: 1fr;
  }

  .stat-item h4 {
    font-size: 2rem;
  }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
  .carousel-item {
    height: 100%;
  }
}

/* 超宽屏优化 */
@media (min-width: 1920px) {
  .carousel-item {
    height: 100%;
  }
}

.hero-section :deep(.el-carousel__container) {
  height: min(1080px, 56.25vw) !important;
}

@media (min-width: 769px) and (max-width: 980px) {
  .overview-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
